<template>
  <div class="department-container">
    <div v-heima="'test'">测试按钮权限的代码</div>

    <el-tree :data="data" empty-text="当前组织架构数据为空..." default-expand-all :expand-on-click-node="false">
      <!-- v-slot只能用在template标签上面，slot-scope普通标签也可以使用 -->
      <!-- <div slot-scope="abc"> -->
      <!-- <div slot-scope="{data: data1, node: node1}">
        <el-button @click="fn(data1,node1 )">测试插槽数据</el-button>
      </div> -->
      <div slot-scope="{data: data1}" class="item">
        <div class="left">{{ data1.name }}</div>
        <div class="right">
          <span class="ir-name">{{ data1.managerName }}</span>
          <!-- $event 是模板自带的，当前事件默认的事件对象，要传递自己的参数，必须现在第一个参数
          把这个默认参数补齐 -->
          <el-dropdown @command="handleCommand($event, data1.id)">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- vue的封装的几个简单修饰符 .prevent 等价于原生webapi里面  e.preventDefault -->
              <!-- .stop 等价于原生的webapi里面 e.stopPropergation -->
              <!-- <el-dropdown-item @click.native="test1">添加子部门</el-dropdown-item>
              <el-dropdown-item @click.native="test2">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="test3">删除</el-dropdown-item> -->
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>

    <!-- <addDeptVue ref="addDialogRef" /> -->
    <addDeptVue ref="addDeptRef" :visible.sync="dialogVisible" :origin-list="originList" :current-id="currentId" @updateParent="getDepartment" />

    <!-- 在自定义组件上面使用v-model. 让父子组件通信更方便 -->
    <!-- <sync-com v-model="count" />
    <h3>{{ count }}, {{ msg }}</h3> -->
    <!-- <sync-com :value="count" @input="count = $event" /> -->
    <!-- <div>==============</div>
    <sync-com :msg.sync="msg" /> -->
    <!-- sync也是简化父子通信的语法糖， 假设a.sync 这个绑定，就是父向子传递属性 a, 子向父通知 update:a -->
    <!-- v-model 一个组件只能用一次 和 sync 一个组件可以使用多次  -->
    <!-- <sync-com :msg="msg" @update:msg="msg = $event" /> -->
  </div>
</template>

<script>
import { getDepartmentRequest, deleteDepartmentByIdRequest } from '@/api/department'
import { transfromListToTree } from '@/utils'
import addDeptVue from './components/add-dept.vue'
// import syncCom from './syncCom.vue'

export default {
  name: 'DepartmentCom',
  components: { addDeptVue },
  data() {
    return {
      data: [],
      count: 1,
      msg: 10,
      dialogVisible: false,
      originList: [],
      currentId: null
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    fn(a, b) {
      console.log(a, b)
    },
    handleCommand(command, id) {
      console.log(command, id)
      // 下面这一行代码，很厉害，父向子传的值，父组件把这个值改变了以下
      // 子组件监听到了这个值的改变，就开启一个异步更新页面的任务
      this.currentId = id
      if (command === 'add') {
        // 可以调用自主组件的方法，将弹出框打开，不能直接把子组件的数据改了,破坏数据的流向
        // this.$refs.addDialogRef.dialogVisible = true
        // this.$refs.addDialogRef.open()
        this.dialogVisible = true
      } else if (command === 'edit') {
        console.log(1)
        // 打开弹出框
        this.dialogVisible = true
        // 数据回填，需要发请求(在父组件里面访问子组件的方法)
        // this.$refs.addDeptRef.getDepartmentById(id)
        this.$nextTick(() => {
          // 这个函数执行的时机，就是等到dom渲染成功以后，在执行
          // currentId在父组件一旦发生改变，里面通知子组件去更新自己的dom页面。dom更新是异步的操作。 需要使用$nextTick 等子组件更新好了以后，props是最新的值了，在调用子组件的方法或者属性，props在js里面才是最新的值
          this.$refs.addDeptRef.getDepartmentById()
        })
        console.log(2)
      } else {
        // alert confirm prompt
        this.$confirm('此操作将删除部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await deleteDepartmentByIdRequest(id)
          // 删除成功以后，刷新整个tree组件，就是调用一遍getDepartment函数
          this.getDepartment()
        }).catch(() => {
        })
      }
    },
    async getDepartment() {
      const res = await getDepartmentRequest()
      // originList这个变量是传递给组件 校验用的
      this.originList = res.data
      // 下面data数据，是给el-tree组件使用的 树形结构
      this.data = transfromListToTree(res.data, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 20px;
}
.item {
  width: 100%;
  display: flex;
  .left {
    flex: 4;
    // background-color: red;
    padding: 10px 0;
  }
  .right {
    flex: 1;
    // background-color: greenyellow;
    padding: 10px 0;
    .ir-name {
      margin-right: 15px;
    }
  }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
